// gulp 打包
const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const autoprefixer = require('gulp-autoprefixer')
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const htmlmin = require('gulp-htmlmin')




// 1.打包css
const cssHandler = () => {
    return gulp
      .src('./src/css/*.css')               
      .pipe(autoprefixer())                
      .pipe(cssmin())                       
      .pipe(gulp.dest('./dist/css/'))      
}
// 2.打包js
const jsHandler = () => {
    return gulp
      .src('./src/js/*.js')
      .pipe(babel({ presets: [ '@babel/preset-env' ] })) // 把 ES6 转换成 ES5
      .pipe(uglify()) 
      .pipe(gulp.dest('./dist/js/'))
}
// 3.打包html
const htmlHandler = () => {
    return gulp
      .src('./src/*.html')
      .pipe(htmlmin({ // 进行压缩
        collapseWhitespace: true, // 把所有空格去掉
        collapseBooleanAttributes: true, // 简写所有布尔属性
        removeAttributeQuotes: true, // 移除属性中的双引号
        removeEmptyAttributes: true, // 移除空属性
        removeComments: true, // 移除注释内容
        removeScriptTypeAttributes: true, // 移除 script 标签默认的 type 属性
        removeStyleLinkTypeAttributes: true, // 移除 link 和 style 标签的默认 type 属性
        minifyCSS: true, // 压缩内嵌式 css 代码
        minifyJS: true, // 压缩内嵌式 js 代码
      }))
      .pipe(gulp.dest('./dist/'))
}
// 4.转移img
const imgHandler = () => {
    return gulp
      .src('./src/img/**.*')
      .pipe(gulp.dest('./dist/img/'))
}
// 5.转移fonts
const fontHandler = () => {
    return gulp
      .src('./src/fonts/**.*')
      .pipe(gulp.dest('./dist/fonts/'))
  }
// 6.转移vendor
const vendorHandler = () => {
    return gulp
      .src('./src/vendor/**')
      .pipe(gulp.dest('./dist/vendor/'))
}
// 7.配置一个总任务
const defaultHandler = gulp.series(
    gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler,   fontHandler, vendorHandler)
)
//导出
module.exports = {
    cssHandler,
    jsHandler,
    htmlHandler,
    imgHandler,
    fontHandler,
    vendorHandler,
    default: defaultHandler,
  }